你愿意做一个笨人吗?
国庆前,有一只“笨笨”的H5出现在很多人的朋友圈里。它就是王者荣耀x敦煌研究院的数字供养人计划第二期。
项目信息:
品牌 - 王者荣耀
监制 -TGideas x 敦煌研究院
制作- TGideas
创意监制 - LAVA
品牌经理 -Teri、Ula、Leon
项目管理 - Vicky、Karen
创意- 石头、onon
文案- 树
设计 -Must、宝强
多媒体交互与动画 - bobo、TJL
多媒体开发- 超哥、佳平、林雨哥、权妈
前端重构 - DG、Soinc
调色 - onon、TJL、宝强、2文(旗众)、小夏(旗众)、23(旗众)
音乐指导 - FOKO
音乐 - 冯舜贤(佳荧)、FOKO
音效- 小余(佳荧)、FOKO
为什么用“笨”来形容它呢?
因为从工作量上,这个H5的总素材大小有182MB,相当于10个常规的H5大小加在一起,从创意到完成花费了近3个月的时间。我们从五个朝代,40个洞窟中,选出了10幅比较有代表性敦煌壁画,重绘了20张画,10张线稿。制作了2000多个素材。如此复杂庞大的工作量,我们可谓是吃尽苦头,异常困难。
在这样的一个高速数字化时代,很少人会愿意花费这么大的精力去细细打磨这样的一个广告。不得不承认我们这次是有那么几丝笨拙,几分天真。但我们为什么要这样做呢?
选画部分
壁画的未来面貌
再现部分
为何选择“困难”模式?
创作初期我们到达敦煌采集素材观摩了莫高窟与榆林窟。莫高窟的诞生源于敦煌人对信仰的执着,古人们集资费时千百年来供养着她。每一幅洞窟内的壁画都精美绝伦,并且每个时期的风格迥异。制造工艺繁琐,可以称得上是世界上最大的“画廊”。
敦煌壁画的制作流程(从右到左):
敦煌壁画的制作流程复杂,最底层的是粗草泥层,其次是细泥层、白粉层。最后是古代画家们绘制的地仗,画师们会以红线勾底,做为线稿,在这个基础上上色。
观看细节上千万个人物造型、佛像每个都不一样。
精致到连飘带都如此真实。
还有镀金,立体绘制等多种工艺。
敦煌人对壁画的执着与对细节与美感的高度追求,让我们深受感动。我们希望可以把壁画的精神融合在这只H5里,但这样就无疑会陷入巨大的工作量与壁画研究之中。困难模式就困难模式吧,谁让我们是手艺人呢。
制作部分
制作这样的一个H5,有几个技术上的难点:
难点一是如何既能让用户有丰富的颜色选择,又能使“再现”的壁画怎么都有敦煌感?
根据这个问题我们找了个笨办法来解决:从五个朝代,40个洞窟中,提取了100多个颜色,2000多个色块。专门定制了10块专属的敦煌色板供用户选择。
整体制作流程是这样子的:
10幅壁画 —— 将每幅壁画进行2张重绘 —— 3张为一幅壁画,进行抠图 —— 根据壁画所在的洞窟提取8-12个颜色,制成色板 —— 根据色板进行调色
第一步:重绘
10幅画各有14-30个色块。分好可涂色区域后,为了丰富涂色的视觉感受,让用户填色起来不至于产生原画简单调色的单一感。我们对每张画进行的2版不同颜色、肌理的重绘。
第二步:抠图
如图所示,根据分好的填色区域开始抠图,将每一个色块进行分离。
一幅画有有 3版图, 每版有14-30个区域需要抠出来。 这样算我们每张图需要抠42-90个图形色块。 总共十张图,抠图区域的总量是420-900个色块。
第三步:提取颜色,制造色板
颜色的提取方法:1.优先从壁画里提取 2.然后从壁画所处的洞窟之中提取 3. 其次会从同时期的洞窟中提取,这样就不会产生颜色非常的跳脱,非常的不敦煌这种情况。
第四步:调色
每一个色块的需要有8-12个颜色素材。每张壁画有112-300色块需要单独来调色。
调色方法:改变物体色相,同时改变物体明度,使得点击了什么颜色就会涂上什么颜色。
一个颜色一幅画的调整,在整个纯色的页面下每个物体依旧是可区分的,不会粘连在一起,如图所示。
难点二是如何在敦煌壁画的美术风格下强化用户DIY的感受,保证随机搭配的美感?
解决方法:在调好色的素材上加壁画的泥底、斑点、脱落的机理,仿照氧化后效果。这样画面的质感能得到大幅度的提升,同时也能让用户随意搭配的时候不会显得那么新,颜色不协调。
也有一些特殊的情况,比如人物脸部变色后画面可能会很奇怪,识别度变得很低。也不符合敦煌壁画的感受。我们针对这些特殊的地方,将脸部和头发绑定成一个色块,用户点击这两个区域的任意一个区域都会一起变色。
看了我们研究出来的这些互联网“古法”制作的壁画后,是不是有点震惊。下面让大家欣赏一下H5后台的海量素材吧!(前方高能!)
原画:
线稿:
剥落过程:
涂色过程:
按钮设计:
正是敦煌人对信仰“笨拙”的坚持、“笨拙”的制造、“笨拙”的精益求精,才有敦煌文明的灿烂辉煌。
回看现今这样一个事事求快,事事求效率的时代,不禁觉得我们失去了一些重要的东西,有时候“笨”一点挺好的。让自己慢下来,静下心,观看敦煌的美,欣赏她的美。
欢迎扫码体验或点击“阅读原文”
▼点击查看更多游戏干货内容